<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">
            body{
                background: black
            }
            #content{
                width: 1200px;
                height: 900px;
                border-bottom-color: blanchedalmond;
                background-color: lightgray;
                margin-left: 50px;
            }
        </style>
    </h:head>
    <h:body>
        <div id="content">
            <br /><br /><br />
            <h3 align="center">Validaciones y Convertidores</h3>
            <h:form>
                <h:panelGroup>
                    <h:inputText value="#{tablaLetrasBean.nombreUsuario}" size="50">
                                    <f:validator validatorId="nombreValidator" />
                                </h:inputText>Apellido
                            <h:inputText value="#{tablaLetrasBean.nombreUsuario}"  size="50"></h:inputText>
           
                            <h:inputText value="#{tablaLetrasBean.nombreUsuario}"  size="50"></h:inputText>
                      
                                <h:commandButton value="Aceptar" action="result">
                                </h:commandButton>
         
                </h:panelGroup>
                <hr />
                <h2 align="center">Signo Zodiacal: #{tablaLetrasBean}</h2>
                <h:panelGroup>
                    <h:dataTable value="#{tablaLetrasBean.tablaLetrasList}" var="letra" border="1" cellpadding="0">
                        <h:column rowHeader="Letra en Nombre">
                            <f:facet name="header">Letra de Nombre</f:facet>
                            <h:outputText value="#{letra.letra}">
                            </h:outputText>
                        </h:column>
                        <h:column rowHeader="Posición en Alfabeto">
                            <f:facet name="header">Posición en Alfabeto</f:facet>
                            <h:outputText value="#{letra.posicionEnAlfabeto}"></h:outputText>
                        </h:column>
                        <h:column rowHeader="Letra Anterior">
                            <f:facet name="header">Letra Anterior</f:facet>
                            <h:outputText value="#{letra.letraAnterior}"></h:outputText>
                        </h:column>
                        <h:column rowHeader="Letra Posterior">
                            <f:facet name="header">Letra Posterior</f:facet>
                            <h:outputText value="#{letra.letraSiguiente}"></h:outputText>
                        </h:column>
                    </h:dataTable>
                </h:panelGroup>
            </h:form>
        </div>
    </h:body>
</html>

